import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { createPage } from 'nc-lightapp-front';
import './index.less';
import ButtonAdd from "./button-add/index"
import InpurtSearch from "./input-search/index"
import DataTableList from "./data-table-list/index"

/**
 * @功能: 票袋组件
 * @作者：Mr.sha
 * @日期：2022-05-26
 */
export default class TicketBag extends Component {

    /**
     * @功能: 票袋组件的构造函数
     * @作者：Mr.sha
     * @日期：2022-05-26
     * @param {*} props 父级传递过来的参数
     */
    constructor(props) {
        super(props);

        let multiLang = this.props.MutiInit.getIntl(2011); 
        
        this.state = {
            // 新建票袋按钮的显示名称
            buttonAddShowVal: multiLang.get("201103INUP-0027"),
            activeId: "1",
            // 模糊搜索的值
            fuzzySearchValue: null
        };
        // 新增按钮触发的函数  
        this.handleAddBag =this.handleAddBag.bind(this);
        // 票袋名称改变后触发的函数 
        this.handleAfterValChangeBag = this.handleAfterValChangeBag.bind(this);
        // 删除按钮触发的函数 
        this.handleDelBag = this.handleDelBag.bind(this);
        // 初始化界面函数 
        this.handleInitDataBag = this.handleInitDataBag.bind(this);
        // 刷新界面函数
        this.handleRefreshDataBag = this.handleRefreshDataBag.bind(this);
        this.handleChangeActiveDataTableList = this.handleChangeActiveDataTableList.bind(this);
        // 票袋
        this.onRef = this.onRef.bind(this);
        // 点击搜索按钮
        this.handleClickSearch = this.handleClickSearch.bind(this);
        // 删除
        this.handleDeleteDataTableList = this.handleDeleteDataTableList.bind(this);
        

    }


    // 组件将要挂载时触发的函数~~~只执行一次
    componentWillMount() {
        console.log("componentWillMount");
    }

    // 组件挂载完成时触发的函数~~~只执行一次
    componentDidMount() {
        console.log("componentDidMount"); 
        if(this.props && this.props.onBagRef){
            this.props.onBagRef(this)
        }  
    }

    /**
     * 组件将要更新数据时触发的函数
     * @param {*} newProps 新的props
     * @param {*} newState 新的State
     * @param {*} newContext 新的context
     */
    componentWillUpdate(newProps,newState,newContext) {
        
        // console.log("componentWillUpdate"); 
        // console.log(newProps);
        // console.log(newState);
        // console.log(newContext);
    }

    /**
     * 组件数据更新完成时触发的函数
     * @param {*} newProps 新的props
     * @param {*} newState 新的State
     * @param {*} Snapshot 由componentWillReceiveProps⽣命周期返回的快照
     */
    componentDidUpdate(newProps,newState,Snapshot) {
        
        // console.log("componentDidUpdate"); 
        // console.log(newProps);
        // console.log(newState);
        // console.log(Snapshot);
    }

    /**
     * @功能: 票袋名称改变后触发的函数
     * @作者：Mr.sha
     * @日期：2022-05-27
     * @param {*} e 
     */
    handleAfterValChangeBag(params) {
        console.log("handleValChangeBag");
    }

    handleBagActiveId() {
        return this.dataTableList.handleBagActiveId({});
    }

    /**
     * @功能: 删除按钮触发的函数
     * @作者：Mr.sha
     * @日期：2022-05-27
     * @param {*} e 
     */
    handleDelBag(params) {
        console.log("handleDelBag");
    }

    /**
     * @功能: 初始化界面函数
     * @作者：Mr.sha
     * @日期：2022-05-27
     * @param {*} e 
     */
    handleInitDataBag(params) {
        console.log("handleInitDataBag");
    }

    /**
     * @功能: 刷新界面函数
     * @作者：Mr.sha
     * @日期：2022-05-27
     * @param {*} e 
     */
    handleRefreshDataBag(params) {
        console.log("handleInitDataBag");
    }

    /**
     * @功能: 改变当前活跃的对象
     * @作者：Mr.sha
     * @日期：2022-05-27
     * @param {*} e 
     */
    handleChangeActiveDataTableList(params){
        if(this.props && this.props.handleChangeActiveDataTableList){
            this.props.handleChangeActiveDataTableList(params);
        }
    }

    onRef = (ref) => {
        this.dataTableList = ref
    }

    /**
     * @功能: 新增按钮触发的函数
     * @作者：Mr.sha
     * @日期：2022-05-27
     * @param {*} e 
     */
    handleAddBag(params) {
        this.dataTableList.handleAddBag();
    }

    /**
     * @功能: 刷新左侧票袋列表
     * @作者：Mr.sha
     * @日期：2022-06-06
     * @param {*} e 
     */
     handleRefTableList(params) {
        this.dataTableList.handleRefTableList(params);
    }

    // let aa = document.getElementsByClassName("transfertable-main");
    // if(aa && aa[0].style){
    //     console.log(aa[0].style.height);
    // }

    getBagStyleAll() {
        let style = {};
        let { transfertableMainHeight } = this.props;
        if(transfertableMainHeight){
            style = {height: (transfertableMainHeight - 42) + "px", overflow: 'none'};
        }
        return style;
    }

    getBagClassAll() {
        let classNameArr = ['ticket-bag'] ;
        if(this.props && this.props.bagIsHidden){
            classNameArr.push('ticket-bag-hidden');
        }
        return classNameArr.join(' ');
    }

    onRef = (ref) => {
        this.dataTableList = ref
    }

    /**
     * @功能: 新增按钮触发的函数
     * @作者：Mr.sha
     * @日期：2022-05-27
     * @param {*} e 
     */
    handleAddBag(params) {
        this.dataTableList.handleAddBag();
    }

    /**
     * @功能: 刷新左侧票袋列表
     * @作者：Mr.sha
     * @日期：2022-06-06
     * @param {*} e 
     */
     handleRefTableList(params) {
        this.dataTableList.handleRefTableList(params);
    }

    getBagClassAll() {
        let classNameArr = ['ticket-bag'] ;
        if(this.props && this.props.bagIsHidden){
            classNameArr.push('ticket-bag-hidden');
        }
        return classNameArr.join(' ');
    }

    /**
     * @功能: 模糊搜索的事件
     * @作者：Mr.sha
     * @日期：2022-06-14
     * @param {*} params
     */
    handleClickSearch(params) {
        this.dataTableList.handleClickSearch(params);
    }

    /**
     * @功能: 删除票袋
     * @作者：Mr.sha
     * @日期：2022-06-16
     * @param {*} params
     */
     handleDeleteDataTableList(params) {
        if(this.props && this.props.handleDeleteDataTableList){
            this.props.handleDeleteDataTableList(params);
        }
    }

    render() {
        let multiLang = this.props.MutiInit.getIntl(2011);
        return (
            <div className = { this.getBagClassAll()  } style = {this.getBagStyleAll()} id = "ticket-bag">
                <div className='ticket-bag-main'>
                    <ButtonAdd showVal = {multiLang.get("201103INUP-0027")} handleAddBag = {this.handleAddBag} />
                    <InpurtSearch 
                        handleRefreshDataBag = {this.handleRefreshDataBag}
                        handleClickSearch = {this.handleClickSearch}
                    />
                    <DataTableList 
                        activeIdList = {this.state.activeId}
                        onRef = {this.onRef} 
                        handleAfterValChangeBag = {this.handleAfterValChangeBag}
                        handleDelBag = {this.handleDelBag}
                        handleChangeActiveDataTableList = {this.handleChangeActiveDataTableList}
                        params = {this.props.params}
                        transfertableMainHeight = {this.props.transfertableMainHeight}
                        handleDeleteDataTableList = {this.handleDeleteDataTableList}
                        getCardData = {this.props.getCardData}
                    />
                </div>
            </div>
        )
    }
}

TicketBag = createPage({
    mutiLangCode: '2011'
})(TicketBag);

ReactDOM.render(<TicketBag />, document.querySelector('#app'))